<template>
  <button :class="(size == 'large' ? 'mbutLarge' : 'mbutSmall') + (type == 'cancel' ? ' cancelColor' : ' defaultColor')"
    :style="computedStyle">
    <slot></slot>
  </button>
</template>

<script>
import { } from "vue"
export default {
  name: 'MButton',
  components: {},
  props: {
    style: {
      type: Object,
    },
    size: {
      type: String,
      default: 'large'
    },
    type: {
      type: String,
      default: 'defaultColor'
    },
  },
  computed: {
    computedStyle() {
      return {
        ...this.style
      };
    }
  },
  mounted() {


  },
  setup() {
    return {
    };
  },
};
</script>

<style scoped>
.mbutLarge {
  min-width: 120px;
  height: 34px;
  border-radius: 5px;
  font-size: 16px;
  padding: 0 10px;
}

.mbutSmall {
  min-width: 70px;
  height: 27px;
  border-radius: 3px;
  font-size: 12px;
  padding: 0 10px;
}

.defaultColor {
  color: white;
  background: #457bf7ff;
  cursor: pointer;
  border: none;
}

.cancelColor {
  color: black;
  background: white;
  cursor: pointer;
  border: none;
  border: 1px solid #c2c2c2;
}

button:hover {
  background: #6a9efaff;
}
</style>
